﻿
<template>
    <section>









        <el-row :gutter="20">
            <el-col :span="6">
                <div class="">

                    <el-card class="">
                        <div slot="header" class="clearfix">
                            <span>公司项目</span>
                            <!--<el-button style="float: right; padding: 3px 0" type="text" @click='handleAdd'>新增</el-button>-->
                        </div>

                        <div class="text item" :style="{height: treeHeight + 'px', 'overflow-y': 'auto'}">
                            <!-- expand-on-click-node 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。-->
                            <el-tree :data="treeComPro" :props="defaultProps" @node-click="handleNodeClick"
                                     default-expand-all
                                     :expand-on-click-node="false"></el-tree>
                        </div>
                    </el-card>

                </div>
            </el-col>
            <el-col :span="18">
                <div class="">
                    <el-card class="">
                        <div slot="header" class="clearfix">
                            <span>部门信息</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click='handleAdd'>新增选项</el-button>
                        </div>
                        <div class="text item" :style="{height: treeHeight + 'px', 'overflow-y': 'auto'}">

                            <!--列表-->

                            <el-table :data="users"
                                      style="width: 100%;margin-bottom: 20px;"
                                      border
                                      row-key="Id"
                                      default-expand-all
                                      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

                                <!--<el-table-column prop='Id' label='主键ID' width='' sortable>  </el-table-column>
                                <el-table-column prop='Pid' label='父节点' width='' sortable>  </el-table-column>-->
                                <el-table-column prop='DeptName' label='部门名称' width='' sortable>  </el-table-column>
                                <!--<el-table-column prop='ProID' label='项目' width='' sortable>  </el-table-column>
                                <el-table-column prop='name' label='公司' width='' sortable>  </el-table-column>-->


                                <el-table-column label='操作' width='150'>
                                    <template scope='scope'>
                                        <el-button size='small' @click='handleEdit(scope.$index, scope.row)'> 编辑 </el-button>
                                        <el-button type='danger' size='small' @click='handleDel(scope.$index, scope.row)'> 删除 </el-button>
                                    </template>
                                </el-table-column>

                            </el-table>

                        </div>
                    </el-card>

                </div>
            </el-col>
        </el-row>

 
        <!--编辑界面-->
        <el-dialog title='编辑' :visible.sync='editFormVisible' v-model='editFormVisible' :close-on-click-modal='false'>
            <el-form :model='editForm' label-width='80px' :rules='editFormRules' ref='editForm'>

                <!--<el-form-item label='主键ID' prop='Id'>
                    <el-input v-model='editForm.Id' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='父节点' prop='Pid'>
                    <el-input v-model='editForm.Pid' auto-complete='off'></el-input>
                </el-form-item>-->


                <el-form-item label='部门名称' prop='DeptName'>
                    <el-input v-model='editForm.DeptName' auto-complete='off'></el-input>
                </el-form-item>


                <!--<el-form-item label='项目' prop='ProID'>
                    <el-input v-model='editForm.ProID' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='公司' prop='ComID'>
                    <el-input v-model='editForm.ComID' auto-complete='off'></el-input>
                </el-form-item>-->


                <!--<el-form-item label='创建名称' prop='CreateTime'>
                    <el-input v-model='editForm.CreateTime' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='' prop='CreateUserID'>
                    <el-input v-model='editForm.CreateUserID' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='' prop='CreateUserName'>
                    <el-input v-model='editForm.CreateUserName' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='' prop='DeleteMark'>
                    <el-input v-model='editForm.DeleteMark' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='' prop='SortCode'>
                    <el-input v-model='editForm.SortCode' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='' prop='Enabled'>
                    <el-input v-model='editForm.Enabled' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='' prop='ModifyDate'>
                    <el-input v-model='editForm.ModifyDate' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='' prop='ModifyUserId'>
                    <el-input v-model='editForm.ModifyUserId' auto-complete='off'></el-input>
                </el-form-item>


                <el-form-item label='' prop='ModifyUserName'>
                    <el-input v-model='editForm.ModifyUserName' auto-complete='off'></el-input>
                </el-form-item>-->


            </el-form>
            <div slot='footer' class='dialog-footer'>
                <el-button @click.native='editFormVisible = false'>取消</el-button>
                <el-button type='primary' @click.native='editSubmit' :loading='editLoading'>提交</el-button>
            </div>
        </el-dialog>



        <!--新增界面-->
        <el-dialog title='新增' :visible.sync='addFormVisible' v-model='addFormVisible' :close-on-click-modal='false'>
            <el-form :model='addForm' label-width='80px' :rules='addFormRules' ref='addForm'>
                <el-form-item label='部门名称' prop='DeptName'>
                    <el-input v-model='addForm.DeptName' auto-complete='off'></el-input>
                </el-form-item>


                <!--<el-form-item label='公司' prop='ComID'>
                    <el-input v-model='addForm.ComID' auto-complete='off' readonly></el-input>
                </el-form-item>
                <el-form-item label='项目' prop='ProID'>
                    <el-input v-model='addForm.ProID' auto-complete='off' readonly></el-input>
                </el-form-item>-->

            </el-form>
            <div slot='footer' class='dialog-footer'>
                <el-button @click.native='addFormVisible = false'>取消</el-button>
                <el-button type='primary' @click.native='addSubmit' :loading='addLoading'>提交</el-button>
            </div>
        </el-dialog>





    </section>
</template>

<script>

    import util from '../../../util/date'
    import { testapi, getPage_Sys_Dept, GetTreeComPro_WY_Project, GetList_Sys_Dept, getByID_Sys_Dept, edit_Sys_Dept, add_Sys_Dept, batchRemove_Sys_Dept, Remove_Sys_Dept } from '../../api/api';

    export default {
        data() {   // 全局变量
            return {
                //ProID: data.ProjectID,
                //ComID: data.CompanyID
                ProID: '',
                ComID: '',
                //   tree
                treeComPro: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },

                //   tree
                treeHeight: 0,
                tableHeight: 0,
                filters: { name: '' },
                users: [],

                total: 0,
                page: 1,
                listLoading: false,
                sels: [],//列表选中列
                addDialogFormVisible: false,
                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {

                    DeptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }]

                }
                ,
                //编辑界面数据
                editForm: {
                    Id: '',
                    Pid: '',
                    DeptName: '',
                    ProID: '',
                    ComID: '',

                    DeleteMark: 0,
                    SortCode: 0,
                    Enabled: 0,

                }
                ,
                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {

                    DeptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
                    //ProID: [{ required: true, message: '请输入项目', trigger: 'blur' }],
                    //ComID: [{ required: true, message: '请输入公司', trigger: 'blur' }],

                }
                ,
                //新增界面数据
                addForm: {
                    Pid: '',
                    DeptName: '',
                    ProID: this.ProID,
                    ComID: this.ComID,

                }

            }
        },
        methods: {    // 全局方法
            //性别显示转换
            //formatSex: function (row, column) {
            //    return row.C_Value == 2 ? '男' : row.C_Value;
            //},
            //formatterCreateTime: function (row, column) {
            //    return (!row.C_CreateTime || row.C_CreateTime == '') ? '' : util.formatDate.format(new Date(row.C_CreateTime), 'yyyy-MM-dd');
            //},
            handleCurrentChange(val) {
                this.page = val;
                this.getDtoPage();
            },
            // 测试
            sortKey(val) {
                console.log(val)
            },


            //获取用户列表
            getDtoPage() {
                let para = {
                    page: this.page,
                    key: this.filters.name
                };
                this.listLoading = true;

                //

                GetTreeComPro_WY_Project().then((res) => {
                    console.log(res.data.response); 
                    this.treeComPro = res.data.response;
                    this.listLoading = false; 
                });


            },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = { id: row.Id };
                    Remove_Sys_Dept(para).then((res) => {
                        if (util.isEmt.format(res)) {
                            this.listLoading = false;
                            return;
                        }
                        this.listLoading = false;
                        if (res.data.success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                        let para = {
                            ProID: this.ProID,
                            ComID: this.ComID
                        };
                        GetList_Sys_Dept(para).then((res) => {
                            this.users = res.data.response;
                            this.listLoading = false;
                        });
                    });
                }).catch((c) => {
                    console.log(c);
                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true;
                console.log(row);
                let para_getGetByID = { id: row.Id };

                getByID_Sys_Dept(para_getGetByID).then((getDto) => {

                    this.editForm = Object.assign({}, getDto.data.response);
                });
            },
            //显示新增界面
            handleAdd() {
                this.addFormVisible = true;
                this.addForm = {
                    Pid: '',
                    DeptName: '',
                    ProID: this.ProID,
                    ComID: this.ComID,

                }
            },
            //编辑
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                        }).then(() => {
                            this.editLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.editForm);
                            console.log(para);
                            edit_Sys_Dept(para).then((res) => {

                                if (util.isEmt.format(res)) {
                                    this.editLoading = false;
                                    return;
                                }
                                if (res.data.success) {
                                    this.editLoading = false;

                                    this.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    this.$refs['editForm'].resetFields();
                                    this.editFormVisible = false;
                                    let para = {
                                        ProID: this.ProID,
                                        ComID: this.ComID
                                    };
                                    GetList_Sys_Dept(para).then((res) => {
                                        this.users = res.data.response;
                                        this.listLoading = false;
                                    });
                                } else {
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                }

                               


                            });
                        });
                    }
                });
            },
            //新增
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                        }).then(() => {
                            this.addLoading = true;
                            let para = Object.assign({}, this.addForm);

                            add_Sys_Dept(para).then((res) => {

                                if (util.isEmt.format(res)) {
                                    this.addLoading = false;
                                    return;
                                }

                                if (res.data.success) {
                                    this.addLoading = false;
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    this.$refs['addForm'].resetFields();
                                    this.addFormVisible = false;

                                    let para = {
                                        ProID: this.ProID,
                                        ComID: this.ComID
                                    };
                                    GetList_Sys_Dept(para).then((res) => {
                                        this.users = res.data.response;
                                        this.listLoading = false;
                                    });
                                }
                                else {
                                    this.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                }
                            });
                        });
                    }
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {

                var ids = this.sels.map(item => item.Id).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    this.listLoading = true;
                    let para = { ids: ids };

                    batchRemove_Sys_Dept(para).then((res) => {
                        this.listLoading = false;

                        if (res.data.success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                        this.getDtoPage();
                        console.log(res)
                    });
                }).catch(() => {

                });
            }


            // 配置内容高度
            , setMainHeight() {
                var self = this;
                var windowHeight = document.body.clientHeight;
                this.treeHeight = windowHeight - 280;

                //计算table需要绑定的高度  treeHeight  tableHeight
                this.tableHeight = this.treeHeight;
                console.log(this.tableHeight);

                window.onresize = () => {
                    var windowHeight = document.body.clientHeight;
                    self.treeHeight = windowHeight - 280;

                    //计算table需要绑定的高度
                    this.tableHeight = this.treeHeight - 60;
                }
            },
            handleNodeClick(data) {
                console.log(data);
                this.ProID = data.ProjectID;
                this.ComID = data.CompanyID;


                let para = {
                    ProID: this.ProID,
                    ComID: this.ComID 
                };
                GetList_Sys_Dept(para).then((res) => { 
                    this.users = res.data.response;
                    this.listLoading = false; 
                });


            }
        },
        mounted() {
            this.getDtoPage();

            this.setMainHeight();

        }
    }

</script>

<style scoped>
</style>
